<template>
  <Header></Header>
  <div class="index-main-container">
    <div class="index-first-container">
      <div class="article-container">
        <div class="article-switch-container">
          <ul class="article-switch">
            <li :class="{current:isShowNotice}" @click="changeFirstTabs(true)">
              通知公告
            </li>
            <li :class="{current:!isShowNotice}" @click="changeFirstTabs(false)">新闻资讯
            </li>
            <a id="article_more" href="javascript:void(0);" class="right"
               @click="goMore">更多+</a>
          </ul>
        </div>
        <div class="article-list">
          <ul v-if="isShowNotice" id="notice" class="article-item-list">
            <li v-for="(item,index) in noticeList" :key="index">
              <a :title="item.title" @click="goDetail(5,item.id)"
                 style="cursor: pointer;">{{ cutString(item.title, 29, "...") }}</a>
              <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
            </li>

          </ul>
          <ul v-if="!isShowNotice" id="news" class="article-item-list">
            <li v-for="(item,index) in newList" :key="index">
              <a href="" :title="item.title">{{ cutString(item.title, 29, "...") }}</a>
              <span>{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right-container">
        <div class="swiper-all-container">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <el-carousel height="300px">
                <el-carousel-item v-for="(item,index) in imageNavList" :key="index">
                  <el-image
                      style="width: 540px; height: 300px"
                      :src="item.imageUrl"
                      fit="fill"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
        <div class="do-container">
          <div v-for="(item,index) in quickNavList" :key="index" class="system bottom-line">
            <div class="txt">
              <div class="center one-line">
                <a :href="item.redirectUrl" target="_blank" :title="item.name">
                  <el-image :src="item.imageUrl" fit="scale-down"></el-image>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="clear:both;"></div>
    </div>

    <div class="index-img-container">
      <div class="img-container-left">
        <a v-if="midNavItem1" :href="midNavItem1.redirectUrl" :title="midNavItem1.title">
          <img :src="midNavItem1.imageUrl" :alt="midNavItem1.title"/>
        </a>
      </div>
      <div class="img-container-right">
        <a v-if="midNavItem1" :href="midNavItem1.redirectUrl" :title="midNavItem1.title">
          <img :src="midNavItem2.imageUrl" :alt="midNavItem2.title"/>
        </a>
      </div>
      <div style="clear:both;"></div>
    </div>
    <div class="index-sec-container">
      <div class="sec-left-container">
        <div class="post_list_dtbox">
          <div id="recruit-tab" class="post_list_category">
            <a href="javascript:void(0);" data-id="job" class="active">职位招聘</a>
            <a href="javascript:void(0);" data-id="teach">专场宣讲</a>
            <span><a id="recruit-more" href="">更多+</a></span>
          </div>
        </div>
        <div class="recruit">
          @*招聘信息*@
          <ul id="job" class="item-list">
            @if (Model.Jobs != null && Model.Jobs.Count != 0)
            {
            foreach (var item in Model.Jobs)
            {
            <li>
              <div class="job-info">
                <div class="job-title">
                  <a href="">@item.name</a>
                  <span class="other">
                                            (@if (string.IsNullOrWhiteSpace(item.region))
                                            {
                                                <text>地点不限</text>
                                            }
                                            else
                                            {
                                                <text>@item.region</text>
                                            })
                                        </span>
                </div>
                <div class="job-salary">
                  @if (item.is_face)
                  {
                  <text>面议</text>
                  }
                  else if (string.IsNullOrWhiteSpace(item.salary_start) && string.IsNullOrWhiteSpace(item.salary_end))
                  {
                  <text>面议</text>
                  }
                  else
                  {
                  @(item.salary_start)
                  <text>-</text>
                  @(item.salary_end)
                  <text>元/月</text>
                  }
                </div>
                <div class="job-welfare">
                  @if (!string.IsNullOrWhiteSpace(item.welfare))
                  {
                  var welfare_arr = item.welfare.Split(',');
                  var isMore = false;
                  if (welfare_arr.Count() > 6)
                  {
                  isMore = true;
                  }
                  foreach (var wf in welfare_arr.Take(6))
                  {
                  <span>@wf</span>
                  }
                  if (isMore)
                  {
                  <span>...</span>
                  }
                  }
                </div>
              </div>
              <div class="company-info">
                <div class="company-title">
                  <a href=""
                     target="_blank">@item.Company.name</a>
                </div>
                <div class="company-tip">
                  <span>@item.Company.nature</span>
                  <span>|</span>
                  <span>@item.Company.scale</span>
                  <span>|</span>
                  <span>职位数(@item.Company.jobs.Count)</span>
                </div>
              </div>
              <div class="clear"></div>
            </li>
            }
            }
          </ul>

          @*企业宣讲*@
          <ul id="teach" class="item-list" style="display:none;">
            @foreach (var item in Model.Lectures)
            {
            <li>
              <div class="left date">
                @if (!item.time.HasValue)
                {
                <text>"待确定"</text>
                }
                else
                {
                <b>@item.time.Value.Day</b>@(item.time.Value.Year)
                <text>.</text>
                @(item.time.Value.Month)
                }
              </div>
              <div class="ut">
                <div class="title"><a href="">@item.title</a></div>
                <div class="addi">
                  <div class="addi-left"><a href="">@item.company_name</a></div>
                  <div class="addi-right">
                    @*@if (!item.time.HasValue)
                    {
                    <text><i class='fa fa-clock-o' aria-hidden='true'></i>&nbsp;待确定&nbsp; &nbsp; &nbsp; &nbsp;</text>
                    }
                    else
                    {
                    <text><i class='fa fa-clock-o' aria-hidden='true'></i>&nbsp;@item.time.Value.ToString("yyyy-MM-dd
                      HH:mm")&nbsp; &nbsp; &nbsp; &nbsp;
                    </text>
                    }*@


                    @if (item.type == 1)
                    {
                    <text><i class='fa fa-map-marker' aria-hidden='true'></i>&nbsp;</text>
                    <a href="@item.venue" title="@(item.company_name)-线上宣讲">访问地址</a>
                    }
                    else if (item.type == 0)
                    {
                    //线下宣讲会

                    @if (string.IsNullOrWhiteSpace(item.venue))
                    {
                    <text><i class='fa fa-map-marker' aria-hidden='true'></i>&nbsp;待确定</text>
                    }
                    else
                    {
                    <text><i class='fa fa-map-marker' aria-hidden='true'></i>&nbsp;@item.venue</text>
                    }
                    }
                  </div>
                  <div style="clear:both;"></div>
                </div>
              </div>
            </li>
            }
          </ul>
        </div>
      </div>
      <div class="sec-right-container">
        <div class="boxx">
          <div class="c-l">
            <span class="line"></span>
            <h2>
              <span>职场文化节&职业规划节</span>
            </h2>
          </div>
          <div class="arlist">
            <ul class="clear">
              <li v-for="(item,index) in activityList" class="red-bg" :key="index">
                <div class="info-title">
                  <a href="" :title="item.title" target="_blank">{{ item.title }}</a>
                </div>
                <span class="date">{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="boxx">
          <div class="c-l">
            <span class="line"></span>
            <h2>
              <span>政策法规</span>
            </h2>
          </div>
          <div class="arlist">
            <ul class="clear">
              <li v-for="(item,index) in policyList" class="yellow-bg" :key="index">
                <div class="info-title">
                  <a href="" :title="item.title" target="_blank">{{ item.title }}</a>
                </div>
                <span class="date">{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="boxx">
          <div class="c-l">
            <span class="line"></span>
            <h2>
              <span>下载中心</span>
            </h2>
          </div>
          <div class="arlist">
            <ul class="clear">
              <li v-for="(item,index) in downloadList" class="green-bg" :key="index">
                <div class="info-title">
                  <a href="" :title="item.title" target="_blank">{{ item.title }}</a>
                </div>
                <span class="date">{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'
import Header from './components/header.vue'
import Footer from './components/footer.vue'
import {selectNavList} from "@/api/common.js";
import {selectArticleTopList} from "@/api/article";
import {parseTime, cutString} from '@/utils/linyang'

const _router = useRouter();


const isShowNotice = ref(true);//true，显示通知公告，false，显示新闻资讯

//切换通知公告和新闻资讯的Tabs
const changeFirstTabs = (data) => {
  isShowNotice.value = data;
}


const noticeList = ref([]);

const selectNoticeList = () => {
  let params = {
    typeId: 5,
    count: 7
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    noticeList.value = res.data;
  });
}
selectNoticeList();

const newList = ref([]);
const selectNewList = () => {
  let params = {
    typeId: 3,
    count: 7
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    newList.value = res.data;
  });
}

selectNewList();


const quickNavList = ref([]);
selectNavList("quickNav").then(res => {
  //console.log("quickNav", res.data);
  quickNavList.value = res.data;
});


const carouselList = ref([]);
const selectCarouselList = () => {
  let params = {
    typeId: 8,
    count: 5
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    carouselList.value = res.data;
  });
}

selectCarouselList();


//活动
const activityList = ref([]);
const selectActivityList = () => {
  let params = {
    typeId: 4,
    count: 5
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    activityList.value = res.data;
  });
}

selectActivityList();

//政策
const policyList = ref([]);
const selectPolicyList = () => {
  let params = {
    typeId: 1,
    count: 5
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    policyList.value = res.data;
  });
}

selectPolicyList();
//下载
const downloadList = ref([]);
const selectDownloadList = () => {
  let params = {
    typeId: 2,
    count: 5
  }
  selectArticleTopList(params).then(res => {
    //console.log(res.data);
    downloadList.value = res.data;
  });
}

const goDetail = (typeId, articleId) => {
  _router.push({
    name: 'articleDetail',
    query: {typeId, articleId}
  });
}


const imageNavList = ref([]);
selectNavList("imageNav").then(res => {
  //console.log("quickNav", res.data);
  imageNavList.value = res.data;
});


// const midNavList = ref([]);
const midNavItem1 = ref({});
const midNavItem2 = ref({});
selectNavList("midNav").then(res => {
  //console.log("quickNav", res.data);
  // midNavList.value = res.data;
  if (res.data && res.data.length > 0) {
    midNavItem1.value = res.data[0];
    midNavItem2.value = res.data[1];
  }
});


const goMore = () => {
  if (isShowNotice.value) {
    _router.push({
      name: 'articleList',
      query: {typeId: 5}
    });
  } else {
    _router.push({
      name: 'articleList',
      query: {typeId: 3}
    });
  }
}


selectDownloadList();
</script>